<template>
  <view class="container">
    <view class="countdown" :animation="animationData">
      {{ formattedTime }}
    </view>
    
    <view class="control-buttons">
      <button @click="toggleTimer" class="btn" :class="{ 'active': isRunning }">
        {{ isRunning ? '暂停' : '开始' }}
      </button>
      <button @click="resetTimer" class="btn reset">重置</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const totalSeconds = ref(1500); // 25分钟
const isRunning = ref(false);
let timer = null;

const animation = uni.createAnimation({
  duration: 2000,
  timingFunction: 'ease-in-out'
});

const animationData = ref(null);

const formattedTime = computed(() => {
  const minutes = Math.floor(totalSeconds.value / 60);
  const seconds = totalSeconds.value % 60;
  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
});

const toggleTimer = () => {
  isRunning.value = !isRunning.value;
  if (isRunning.value) {
    timer = setInterval(() => {
      if (totalSeconds.value > 0) {
        totalSeconds.value--;
        animation.rotate(360).step();
        animationData.value = animation.export();
      } else {
        clearInterval(timer);
        uni.showToast({ title: '时间到！', icon: 'none' });
        isRunning.value = false;
      }
    }, 1000);
  } else {
    clearInterval(timer);
  }
};

const resetTimer = () => {
  clearInterval(timer);
  totalSeconds.value = 1500;
  isRunning.value = false;
  animation.scale(1.1).step({ duration: 1000, timingFunction: 'ease-in-out' })
    .scale(0.9).step({ duration: 1000, timingFunction: 'ease-in-out' });
  animationData.value = animation.export();
};

onMounted(() => {
  store.dispatch('initializeTheme');
});
</script>

<style>
.container {
  height: 100vh;
  background: #2A5CAA;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.countdown {
  width: 360rpx;
  height: 360rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.2);
  margin-bottom: 60rpx;
}

.control-buttons {
  display: flex;
  flex-direction: row;
  gap: 30rpx;
}

.btn {
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  background: rgba(255,255,255,0.15);
  color: white;
  font-size: 28rpx;
  transition: all 0.3s;
}

.btn.active {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.btn.reset {
  background: rgba(255, 99, 71, 0.15);
}
</style>
animation.scale(1.1, 1.1).step({ duration: 1000 })
.scale(1, 1).step({ duration: 1000 });